<template>
  <div class="center_bottom">
    <div class="centered-content">
      <div class="card-container">
        <div
            class="bg-color-black item"
            v-for="item in titleItem"
            :key="item.title"
        >
          <div class="card">
            <div class="image-container">
              <img :src="item.img" class="card-image" style="width: 100px; height: auto;"/>
            </div>

            <div class="text-container">
              <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
              <div>
                <dv-digital-flop
                    class="dv-dig-flop ml-1 pl-3"
                    :config="item.number"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import img1 from "@/assets/img/card/img_1.png"
import img2 from "@/assets/img/card/img_2.png"
import img3 from "@/assets/img/card/img_3.png"
import img4 from "@/assets/img/card/img_4.png"
import img5 from "@/assets/img/card/img_5.png"
import img6 from "@/assets/img/card/img_6.png"
export default {
  data() {
    return {
      titleItem: [
        {
          title: '全部任务数量',
          number: {
            number: [120],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 30
            }
          },
          img:img1
        },
        {
          title: '今日营收金额',
          number: {
            number: [875.57],
            toFixed: 2,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 30
            }
          },
          img:img5
        },
        {
          title: '入驻商家个数',
          number: {
            number: [25],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 30
            }
          },
          img:img6
        },
        {
          title: '全部新生数量',
          number: {
            number: [9837],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 30
            }
          },
          img:img2
        },
        {
          title: '当前注册学生',
          number: {
            number: [9247],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 30
            }
          },
          img:img3
        },
        {
          title: '当前在线学生',
          number: {
            number: [8947],
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 30
            }
          },
          img:img4
        }
      ],
    };
  },
  props: {},
  mounted() {
    this.changeTiming()
  },
  methods: {
    changeTiming() {
      setInterval(() => {
        this.changeNumber()
      }, 3000)
    },
    changeNumber() {
      this.numberData.forEach((item, index) => {
        item.number.number[0] += ++index
        item.number = { ...item.number }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  margin-top: 20px;
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
.centered-content {
  display: flex;
  justify-content: center;
}


.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(3, 148, 123, 0.3);
}


.image-container {
  padding: 10px;
}

.card-image {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.text-container {
  flex-grow: 1;
}
</style>
